// 准备一个数组，用于选项卡的切换,假装是后台的数据
var data = [
    {
        title: '精选',
        imgUrl: '../imgs/c-select1.png',
        details: [
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器000' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' }
        ]
    },
    {
        title: '家电', imgUrl: '../imgs/c-select2.png', details: [
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器1111' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' }
        ]
    },
    {
        title: '酷机', imgUrl: '../imgs/c-select3.png', details: [
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器2222' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' }
        ]
    },
    {
        title: '超市', imgUrl: '../imgs/c-select4.png', details: [
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器33333' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' }
        ]
    },
    {
        title: '穿搭', imgUrl: '../imgs/c-select5.png', details: [
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器4444' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' },
            { href: 'http://www.baidu.com', content: '畅呼吸新格调，极简风空气净化器' }
        ]
    }
]


// 创建对应的分类选项
function selectText(data) {
    var contentSelect = document.getElementsByClassName('content-select')[0]
    // console.log(data)
    for (let i = 0; i < data.length; i++) {

        var li = document.createElement('li')
        li.innerHTML = `
                <img src="${data[i].imgUrl}">
                <p>${data[i].title}</p>
        `
        i == 0 ? li.className = 'active' : ''

        li.onclick = function(){
            indexGetDetails(i,data)
            
            // 给当前点击的元素设置active类名
            this.className = 'active'
            
            // 通过自己找到父级在找父级下面的所有子元素对象
            var sibling = this.parentNode.children
            // console.log(sibling)
            for(let j=0;j<sibling.length;j++){
                // 排除自己，给其他的兄弟元素将类名清除
                if(sibling[j] !== this){
                    sibling[j].className = ''
                }
            }
        }

        contentSelect.appendChild(li)
    }

}

selectText(data)

// 更具传递进来的下标，取出对应的值
function indexGetDetails(index,data){
    console.log(index)
    var datas = data[index].details
    // console.log(datas)

    var contentDetails = document.getElementsByClassName('content-details')[0]
    contentDetails.innerHTML = ''
    for(var i=0;i<datas.length;i++){
        var p = document.createElement('p')
        p.innerHTML = `<a href="${datas[i].href}">${datas[i].content}</a>`

        contentDetails.appendChild(p)
    }
}

indexGetDetails(0,data)